<template>
  <div class="app_container IndexView_container">
    <div class="map">
      <IndexMapBox />
    </div>
    <IndexHeader />
    <PolygonTabGrid />
    <PolygonTabDispatch />
    <PolygonTabList />
    <PolygonTabWarn />
    <VideoTab />
  </div>
</template>

<script>
import IndexHeader from '@/components/ui/IndexHeader'
import PolygonTabGrid from '@/components/ui/PolygonTabGrid'
import PolygonTabDispatch from '@/components/ui/PolygonTabDispatch'
import PolygonTabList from '@/components/ui/PolygonTabList'
import PolygonTabWarn from '@/components/ui/PolygonTabWarn'
import VideoTab from '@/components/ui/VideoTab'
import IndexMapBox from '@/components/ui/IndexMapBox'
export default {
  name: 'IndexView',
  components: {
    [IndexHeader.name]: IndexHeader,
    [PolygonTabGrid.name]: PolygonTabGrid,
    [PolygonTabDispatch.name]: PolygonTabDispatch,
    [PolygonTabList.name]: PolygonTabList,
    [PolygonTabWarn.name]: PolygonTabWarn,
    [VideoTab.name]: VideoTab,
    [IndexMapBox.name]: IndexMapBox
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.IndexView_container {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #0a1b42;
  // aspect-ratio: 16 / 9;
  .tab_content {
    position: relative;
    // top: 0;
    // left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    width: 100%;
    z-index: 1;
  }

  .map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1080px;
    z-index: 0;
  }
}
</style>
